<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>d3操作svg绘制水平柱状图</title>
    <script src="./js/d3.v3.min.js"></script>
    <style>
        svg{
            border: 1px solid #333;
        }
    </style>
    <script>
        window.onload = () => {
            // 添加svg元素
            var svg = d3.select('body').append('svg')
                            .attr('width', 600)
                            .attr('height', 400);
            
            // 准备数据
            var arr = [100,120,250,110];

            // 边距
            var margin = {left: 20, right: 20, top:20, bottom: 20};

            // 线性比例尺
            var xScale = d3.scale.linear()
                            .domain([0,250])
                            .range([0,600-margin.left - margin.right])

            console.log(xScale(250))

            // 添加分组并移动
            var g = svg.append('g')
                        .attr('fill', 'red')
                        .attr("transform", `translate(${margin.left}, ${margin.top})`)

            // d3数据绑定，对数据进行循环
            g.selectAll("rect").data(arr)
                    .enter()
                    .append("rect")
                    .attr("x", 0)
                    .attr("y", (item, index) => index*(40+60))
                    .attr("width", (item) => xScale(item))
                    .attr("height", 40)

            // // 第一个rect
            // g.append('rect')
            //     .attr('x', 0)
            //     .attr('y', 0)
            //     .attr('width', 100)
            //     .attr('height', 40)

            // // 第二个rect
            // g.append('rect')
            //     .attr('x', 0)
            //     .attr('y', 1*(40+60))
            //     .attr('width', 120)
            //     .attr('height', 40)

            // // 第三个rect
            // g.append('rect')
            //     .attr('x', 0)
            //     .attr('y', 2*(40+60))
            //     .attr('width', 250)
            //     .attr('height', 40)

            // // 第四个rect
            // g.append('rect')
            //     .attr('x', 0)
            //     .attr('y', 3*(40+60))
            //     .attr('width', 110)
            //     .attr('height', 40)
            
        }
    </script>
</head>
<body>
</body>
</html> 